const Details = {
  data() {
    return {
      slides: [
        {id:1, picurl:'image/14.png',path:'/details' },
        {id:2, picurl:'image/15.png',path:'/details' },
        {id:3, picurl:'image/16.png',path:'/details' },
        {id:4, picurl:'image/17.png',path:'/details' },
      ],
      recomendImg:[
        {imgUrl:'image/reco1.jpg'},
        {imgUrl:'image/reco2.jpg'},
        {imgUrl:'image/reco3.jpg'},
        {imgUrl:'image/reco4.jpg'},
        {imgUrl:'image/reco5.jpg'},
        {imgUrl:'image/reco6.jpg'},
        {imgUrl:'image/reco7.jpg'},
        {imgUrl:'image/reco8.jpg'},
        {imgUrl:'image/reco9.jpg'},
        {imgUrl:'image/reco10.jpg'},
        {imgUrl:'image/reco11.jpg'},
      ]
    }
  },
  template: `
    <div>
    <div class="header">
      <router-link to="/home" class="goback"><i><</i></router-link><h1><slot>商品详情</slot></h1>
      </div>
      <div class="del-main">
      <!-- 商品 -->
      <div class="products addred" id="products">
        <!-- 轮播图模块 -->
      <x-swiper
      :data="slides"
      pager
      loop
      ></x-swiper>
        <!-- 价格模块 -->
        <div class="prices clearfix">
          <p class="prices-title clearfix">
            <span>￥4298</span>
            <a href="#"><i class="iconfont iconshoucang"></i></a>
          </p>
          <p class="prices-name">iQOO 5 5G版 12GB+128GB 皓影</p>
          <div class="prices-desc">
            <p>[➀赠XE710 Type-C耳机;➁12期免息;③高等级会员加赠半年延保;④赠90元组合配件券]</p><span>120Hz
              超视感柔性屏，骁龙865+LPDDR5+UFS3.1超劲核心，KPL官方比赛用机，超大底变焦三摄。</span><a href="#">iQOO 5 Pro 现货开售中>></a>
          </div>
        </div>

        <!-- 参数模块 -->
        <div class="arguments arrow">
          <ul class="arguments-ul">
            <li>参数</li>
            <li>
              <a href="#">
                <i class="iconfont iconchuliqi"></i>
                <div class="argname">处理器</div>
                <span>骁龙865</span>
              </a>
            </li>
            <li>
              <a href="#">
                <p class="iconfont iconshuaxin1"></p>
                <div class="argname">屏幕刷新率</div>
                <span>120Hz</span>
              </a>
            </li>
            <li>
              <a href="#">
                <p class="iconfont iconchongdian"></p>
                <div class="argname">充电规格</div>
                <span>55W闪充</span>
              </a>
            </li>
            <li>
              <a href="#">
                <p class="iconfont icondianchi"></p>
                <div class="argname">电池</div>
                <span>4500mAI</span>
              </a>
            </li>
            <li><i class="iconfont iconjiantou1"></i></li>
          </ul>
        </div>

        <!-- 已选 -->
        <div class="change">
          <p class="arrow">
            <span class="checked">已选</span>
            <span class="change-desc">5g全网通版 12G+128G 皓影 官方标配1件</span>
            <i class="iconfont iconjiantou1"></i>
          </p>
          <p class="arrow change-type">
            <span class="change-type-span">顺丰速达</span>
            <span class="change-type-span">七天包换</span>
            <span class="change-type-span">全国联保</span>
            <span class="change-type-span">正品保障</span>
            <span class="change-type-span">积分抵现</span>
            <span><i class="iconfont iconjiantou1"></i></span>
          </p>
        </div>
      </div>

      <!-- 评价 -->
      <div class="appraise addred" id="appraise">
        <div class="clearfix appraise-title  arrow">
          <p class="title-left">评价 ( 3400+ )</p>
          <p class="title-right ">好评度 99%</p>
          <p><i class="iconfont iconjiantou1"></i></p>
        </div>

        <div class="appraise-content">
          <ul class="clearfix">
            <li><img src="image/pj.jpg" alt=""></li>
            <li><img src="image/pj.jpg" alt=""></li>
            <li><img src="image/pj.jpg" alt=""></li>
          </ul>
        </div>
      </div>

      <!-- 详情模块 -->
      <div class="detail" id="details">
        <div class="img-title">
          <img src="image/details-t.jpg" alt="">
        </div>
        <div class="img-body">
          <img src="image/details-b.jpg" alt="">
        </div>
      </div>

      <!-- 推荐模块 -->
      <div class="recomend addred" id="recomend">
        <div>
          <img 
          v-for="(item,index) in recomendImg"
          :src="item.imgUrl" 
          alt="item.imgUrl" 
          :key="index"
          class="img-body">
        </div>
      </div>
      </div>
      <!-- 底部导航模块 -->
      <div class="footernav">
          <div class="home">
          <router-link to="/home">
            <i class="van-icon-wap-home-o nav-icon" ></i>
            <p>首页</p>
            </router-link>  
          </div>
        <div class="buy">立即购买</div>
      </div>
    </div>
  `
}